<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div id="echartsPV" ref="echartsPV" class="common-container"></div>
      </el-col>
      <el-col :span="12">
        <div id="echartsUV" ref="echartsUV" class="common-container"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div id="echartsRate" ref="echartsRate" class="common-container"></div>
      </el-col>
      <el-col :span="12">
        <div id="echartsNumOfPeople" ref="echartsNumOfPeople" class="common-container"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div id="echartsNumOfOrder" ref="echartsNumOfOrder" class="common-container"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// import echarts from "echarts";
export default {
  mounted() {
    this.echartsPV();
    this.echartsUV();
    this.echartsRate();
    this.echartsNumOfPeople();
    this.echartsNumOfOrder();
  },
  data() {
    return {};
  },
  methods: {
    //PV
    echartsPV() {
      const echartsPV = this.$echarts.init(this.$refs.echartsPV);
      let option = {
         title: {
          text: '当天PV访问量',
        },
        toolbox: {
          feature: {
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true},
          }
        },
        xAxis: {
          type: "category",
          data: [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
            "24时"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      echartsPV.setOption(option);
    },
    //UV
    echartsUV() {
      const echartsUV = this.$echarts.init(this.$refs.echartsUV);
      let option = {
         title: {
          text: '当天UV访问量',
        },
        toolbox: {
          feature: {
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true},
          }
        },
        xAxis: {
          type: "category",
          data:  [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
            "24时"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      echartsUV.setOption(option);
    },
    //成交转化率
    echartsRate() {
      const echartsRate = this.$echarts.init(this.$refs.echartsRate);
      let option = {
         title: {
          text: '当天成交转化率访问量',
        },
        toolbox: {
          feature: {
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true},
          }
        },
        xAxis: {
          type: "category",
          data:  [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
            "24时"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      echartsRate.setOption(option);
    },
    //成交人数
    echartsNumOfPeople() {
      const echartsNumOfPeople = this.$echarts.init(
        this.$refs.echartsNumOfPeople
      );
      let option = {
         title: {
          text: '当天成交人数访问量',
        },
        toolbox: {
          feature: {
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true},
          }
        },
        xAxis: {
          type: "category",
          data:  [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
            "24时"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [100, 500, 1000, 1500, 2000, 2500, 3000],
            type: "line"
          }
        ]
      };
      echartsNumOfPeople.setOption(option);
    },
    //成交订单数
    echartsNumOfOrder() {
      const echartsNumOfOrder = this.$echarts.init(
        this.$refs.echartsNumOfOrder
      );
      let option = {
         title: {
          text: '当天成交订单数访问量',
        },
        toolbox: {
          feature: {
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true},
          }
        },
        xAxis: {
          type: "category",
          data:  [
            "0时",
            "2时",
            "4时",
            "6时",
            "8时",
            "10时",
            "12时",
            "14时",
            "16时",
            "18时",
            "20时",
            "22时",
            "24时"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      };
      echartsNumOfOrder.setOption(option);
    }
  }
};
</script>
<style scoped >
.common-container {
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #dee5e7;
  width: 100%;
  height: 500px;
  margin-top: 10px;
}
</style>